<template>
    <div>
        <div class="main-right">
            <h3>佣金提现列表</h3>
            <el-select style="width:400px" v-model="applyStatus" placeholder="选择提现状态" @change="handleChange">
                <el-option v-for="item in position" :key="item.label" :label="item.value" :value="item.label">
                </el-option>
            </el-select>
            <el-input style="width:25%;" class='input' @keyup.enter.native="search" prefix-icon="el-icon-search" clearable v-model="name"  placeholder="输入查询条件"></el-input>
            <el-button type="primary" @click.enter="search" icon="el-icon-search">搜索</el-button>
            <el-table :data="tableData" element-loading-text="拼命加载中" style="width: 100%; margin-top:20px;">
                <el-table-column fixed prop="personName" label="用户名称" width="150">
                </el-table-column>
                <el-table-column prop="applyAmount" label="提现金额" width="150">
                </el-table-column>
                <el-table-column prop="bankPersonName" label="持卡人姓名" width="150">
                </el-table-column>
                <el-table-column prop="bankName" label="开户行名称" width="200">
                </el-table-column>
                <el-table-column prop="withdrawAccount" label="开户行卡号" width="200">
                </el-table-column>
                <el-table-column prop="applyStatus" label="提现进度" width="150">
                    <template slot-scope="scope">
                        {{ scope.row.applyStatus == 1 ? '已申请' : (scope.row.applyStatus == 2 ? '已支付' : (scope.row.applyStatus == 3 ? '已拒绝' : ''))}}
                    </template>
                </el-table-column>
                <el-table-column prop="transactor" label="平台操作人" width="150">
                    
                </el-table-column>
                <el-table-column prop="remark" label="操作备注" width="200" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                   
                </el-table-column>

                <el-table-column prop="applyTime" label="申请提现时间" width="180">
                    <template slot-scope="scope">{{$formate(scope.row.applyTime,'yyyy-MM-dd') }}</template>
                </el-table-column>
                <el-table-column prop="updateTime" label="操作时间" width="180">
                    <template slot-scope="scope" v-if="scope.row.applyStatus != 1 ">{{$formate(scope.row.updateTime,'yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="180">
                    <template slot-scope="scope" >
                        <el-button v-if="scope.row.applyStatus == 1"  type="text" @click="editRecord(scope.row)" size="small">操作</el-button>
                        <el-button v-else disabled type="text" @click="editRecord(scope.row)" size="small">操作</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 提现操作 -->
           <div class="aaa" v-if='isShow' style="position:fixed; top:0;bottom:-60px;left:-60px;right:-60px;background:#999;opacity:.4;z-index:22;"></div>
            <div class='popup-detail storeCode '  v-if='isShow' style="position:fixed; top:350px; height:600px" >
                 
                <el-form ref="form" :model="form" style="margin: 0 auto" :rules = "rules">
                    <el-form-item label="申请人名称:" prop="personName">
                        {{form.personName}}
                    </el-form-item>
                    <el-form-item label="提现金额:" prop="applyAmount">
                        {{form.applyAmount}}
                    </el-form-item>
                    <el-form-item label="提现渠道:" prop="withdrawChannel">
                        {{form.withdrawChannel == 1 ? '微信' : '支付宝'}}
                    </el-form-item>
                    <el-form-item label="提现账号:" prop="withdrawAccount">
                        {{form.withdrawAccount}}
                    </el-form-item>
                    <el-form-item label="申请时间:" prop="applyTime">
                        {{this.$formate(form.applyTime, 'yyyy-MM-dd hh:mm:ss')}}
                    </el-form-item>
                    <el-form-item label="审批人:" prop="transactor">
                        <el-input style="width:400px"  type='text' v-model="form.transactor"  placeholder="经办人姓名" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="审批备注:" prop="remark">
                        <el-input style="width:400px" :maxlength="100" type='textarea'  v-model="form.remark" :rows="3" placeholder="请输入备注" clearable></el-input>
                    </el-form-item>
                    <el-form-item class='right-btn' style="text-align:center; margin-top:60px;">
                        <el-button type="primary" size="small" @click="agreeRecord()">同意</el-button>
                        <el-button type="primary"  size="small" @click="noRecord()">拒绝</el-button>
                    </el-form-item>
                     <i class="el-icon-circle-close-outline close" title="关闭" @click="close"></i>

                </el-form>
            </div>
            <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
          
        </div>
    </div>
</template>

<script>
import { getWithdrawRecordListForManage, approveWithdrawRecord } from "../../data/postData";
export default {
    mounted() {
        let {
            page,
            applyStatus,
            name
        } = this.$store.state.commissionList
        this.name = name || ''
        this.applyStatus = applyStatus || ''
        this.getRecordList(this.page)
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            tableData: null,
            total: null,
            size: 10,
            applyStatus:'0',
            name:'',
            page: this.$store.state.commissionList.page,
            isShow: false,
            disabled: false,
            form: {
                transactor: '',
                transDate: '',
                remark: ''
            },
             position:[
                {
                    
                    label: "0",
                    value: "全部"
                },
                {
                    label: "1",
                    value: "已申请"
                },
                {
                    label: "2",
                    value: "已支付"
                },
                {
                    label: "3",
                    value: "已拒绝"
                }
            ],
            rules:{
                transactor: [{required: true, message: "请填写操作人姓名", trigger: "blur"}],
                remark: [{required: true, message: "请填写操作人姓名", trigger: "blur"}],
            }
            
        }
    },
    methods: {
        //
        handleChange(){
            this.$store.dispatch('saveCommissionApplyStatus', this.applyStatus)
        },
        search(){
            this.$store.dispatch('saveCommissionName', this.name)
            this.page = 1
            this.getRecordList(this.page)
        },
        //获取提现列表
        getRecordList(page) {

            if(this.applyStatus != 0){
                var params = {
                    data: {
                        page: page || 1,
                        size: 10,
                        name: this.name,
                        applyStatus: this.applyStatus 
                    }
                };
            }else{
                var params = {
                    data: {
                        page: page || 1,
                        size: 10,
                        name: this.name,
                    }
                };
            }
            this.$fetch.post(getWithdrawRecordListForManage, params).then(res => {
                this.tableData = res.data;
                 this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning",
                    duration: 1000
                });
            });
        },
        editRecord(scope){
            this.isShow = true
           // this.form = scope
            this.form = Object.assign(this.form, scope);
        },
        close(){
            this.isShow = false
        },
        handlePageChange(val) {
            this.page = val;
            this.getRecordList(this.page);
            this.$store.dispatch("saveRecordListPage", this.page);
        },
        agreeRecord(){
          
            var params = {
                "data": {
                    "id": +this.form.id,
                    "applyStatus": 2,
                    "transactor": this.form.transactor,
                    "remark": this.form.remark,
                    "transDate": this.$formate(new Date().getTime(), 'yyyy-MM-dd'),
                    "auditorUserId": '' + this.user.id,
                    "auditorUserName": '' + this.user.nickName
                }
            }
            if(this.form.transactor == ''){
                this.$message({
                    message:'经办人姓名不能为空',
                    type: 'warning',
                    duration: 1000 
                })
            }else{
                this.$confirm("确认同意提现？").then(_ => {
                    this.$fetch.post(approveWithdrawRecord, params).then(res => {
                        this.$message({
                            message:res.message,
                            type: 'success',
                            duration: 1000 
                        })
                        setTimeout(()=>{
                            this.isShow = false
                            this.getRecordList()
                        },1000)
                    }).catch(err=>{
                        this.$message({
                            message: err.message,
                            type: 'warning',
                            duration: 500
                        })
                    })
                })
            }
        },
        noRecord(scope){
            var params = {
                "data": {
                    "id": +this.form.id,
                    "applyStatus": 3,
                    "transactor": this.form.transactor,
                    "remark": this.form.remark,
                    "transDate": this.$formate(new Date().getTime(), 'yyyy-MM-dd'),
                    "auditorUserId": '' + this.user.id,
                    "auditorUserName": '' + this.user.nickName
                }
            }
            if(this.form.transactor == ''){
                this.$message({
                    message:'经办人姓名不能为空',
                    type: 'warning',
                    duration: 1000 
                })
            }else{
                this.$confirm("确认拒绝提现？").then(_ => {
                    this.$fetch.post(approveWithdrawRecord, params).then(res=>{
                        this.$message({
                            message: res.message,
                            type: 'success',
                            duration: 1000 
                        })
                        setTimeout(()=>{
                            this.isShow = false
                            this.getRecordList()
                        },1000)
                    }).catch(err=>{
                        this.$message({
                            message: err.message,
                            type: 'warning',
                            duration: 1000 
                        })
                        
                    })
                })
            }
        },
    }
};
</script>

<style scoped lang="less">
.main-right {
    margin-top: 100px;
    margin-left:210px;
    h3 {
        margin: 20px 0;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 60%;
    }
    a {
        color: #409eff;
    }

}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.storeCode {
   box-sizing: border-box;
   padding:30px 100px;
}

</style>